<template>
    <div class="model-item" @click="click">
        <div class="mode-item-data-item" :class="showItemClass(item.type)">
            <div class="mode-item-item-in">
                <div class="mode-item-pic-type">
                    <img
                        src="~/assets/images/index/model_pdf.png"
                        class="img100"
                        mode=""
                        v-if="item.type == 'PDF'"
                    />

                    <img
                        src="~/assets/images/index/model_word.png"
                        class="img100"
                        mode=""
                        v-if="item.type == 'WORD'"
                    />

                    <img
                        src="~/assets/images/index/model_excel.png"
                        class="img100"
                        mode=""
                        v-if="item.type == 'EXCEL'"
                    />
                    <img
                        src="~/assets/images/index/model_ppt.png"
                        class="img100"
                        mode=""
                        v-if="item.type == 'PPT'"
                    />
                    <img
                        src="~/assets/images/index/model_zips.png"
                        class="img100"
                        mode=""
                        v-if="item.type == 'ZIP'"
                    />
                </div>
                <div
                    class="mode-item-title_in ellipsis2"
                    :class="showTitle_inClass(item.type)"
                >
                    <div class="tit_in">
                        {{ item.title }}
                    </div>
                </div>
                <div class="mode-item-line_in" :class="showLine_inClass(item.type)"></div>

                <div class="mode-item-source" :class="showSourceClass(item.type)">
                    {{ item.abstract }}
                </div>
            </div>
        </div>
        <!-- <div class="mode-item-title ellipsis2">
      {{ item.mode-item-title }}
    </div> -->
    </div>
</template>

<script>
import { mapState } from "vuex";

export default {
    name: "modelItem",
    props: {
        item: {
            type: Object,
            default: () => {
                return {};
            },
        },
    },
    data() {
        return {
            nameColr: false,
            appShow: false,
        };
    },
    computed: {
        ...mapState("common", {
            menuIndex: (state) => state.menuIndex,
        }),
    },
    mounted() {},
    methods: {
        click() {
            this.$emit("click", this.item);
        },

        //动态展示class
        showItemClass(type) {
            //外部边框
            var color = "";
            switch (type) {
                case "ZIP":
                    color = "cZipBg";
                    break;
                case "WORD":
                    color = "cWordBg";
                    break;
                case "EXCEL":
                    color = "cExcelBg";
                    break;
                case "PPT":
                    color = "cPPTBg";
                    break;
                case "PDF":
                    color = "cPDFBg";
                    break;
            }
            return color;
        },

        showItem_inClass(type) {
            //内部背景
            var color = "";
            switch (type) {
                case "ZIP":
                    color = "cZipBg-in";
                    break;
                case "WORD":
                    color = "cZipBg-in";
                    break;
                case "EXCEL":
                    color = "cZipBg-in";
                    break;
                case "PPT":
                    color = "cZipBg-in";
                    break;
                case "PDF":
                    color = "cZipBg-in";
                    break;
            }
            return color;
        },

        showTitle_inClass(type) {
            //内部标题
            var color = "";
            switch (type) {
                case "ZIP":
                    color = "cZipTitle-in";
                    break;
                case "WORD":
                    color = "cWordTitle-in";
                    break;
                case "EXCEL":
                    color = "cExcelTitle-in";
                    break;
                case "PPT":
                    color = "cPPTTitle-in";
                    break;
                case "PDF":
                    color = "cPDFTitle-in";
                    break;
            }
            return color;
        },

        showLine_inClass(type) {
            //内部横线
            var color = "";
            switch (type) {
                case "ZIP":
                    color = "cZipline-in";
                    break;
                case "WORD":
                    color = "cWordline-in";
                    break;
                case "EXCEL":
                    color = "cExcelline-in";
                    break;
                case "PPT":
                    color = "cPPTline-in";
                    break;
                case "PDF":
                    color = "cPDFline-in";
                    break;
            }
            return color;
        },

        showSourceClass(type) {
            //来源字体
            var color = "";
            switch (type) {
                case "ZIP":
                    color = "cZipSource";
                    break;
                case "WORD":
                    color = "cWordSource";
                    break;
                case "EXCEL":
                    color = "cExcelSource";
                    break;
                case "PPT":
                    color = "cPPTSource";
                    break;
                case "PDF":
                    color = "cPDFSource";
                    break;
            }
            return color;
        },
    },
};
</script>

<style lang="scss" scoped>
.model-item {
    margin-top: 20px;
    &:hover .mode-item-data-item {
        top: -6px;
        box-shadow: rgba(60, 65, 75, 0.1) 0px 8px 16px 0;
    }
}
.mode-item-data-item {
    margin: 0 10px;
    width: 280px;
    height: 315px;
    background: #ffffff;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    transition: all 0.5s cubic-bezier(0, 0, 0, 1);
    top: 0;
}

.mode-item-item-in {
    position: relative;
    margin: 15px auto;
    overflow: hidden;
    width: 250px;
    height: 300px;
    background: linear-gradient(
        180deg,
        #ffffff 68%,
        rgba(255, 255, 255, 0.1) 100%
    );
    border-radius: 10px;
}

.mode-item-title {
    margin: 10px;
    width: 260px;
    font-size: 14px !important;
    color: #333333;
}
.mode-item-title_in {
    text-align: center;
    margin: 0 auto;
    margin-top: 24px;
    width: 220px;
    min-height: 42px;
    font-size: 16px;
    font-weight: 500;
    color: #a27ac8;
}

.mode-item-line_in {
    margin: 0 auto;
    margin-top: 40px;
    width: 212px;
    height: 2px;
    background: #e6d4f7;
    opacity: 50%;
}

.mode-item-source {
    margin-top: 20px;
    padding: 0 20px;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 24px;
    color: #e6cefd;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
}


@import url("~/assets/static/reset.css");

// }
</style>
<style scoped>
.mode-item-pic-type {
    margin: 0 auto;
    margin-top: 40px;
    width: 45px;
    height: 45px;
}

/* zip样式 */
.cZipBg {
    background: #f6eeff;
}

.cZipBg-in {
    background: linear-gradient(
        180deg,
        #ffffff 68%,
        rgba(255, 255, 255, 0.1) 100%
    );
}

.cZipTitle-in {
    color: #a27ac8;
}

.cZipline-in {
    background: #e6d4f7;
}

.cZipSource {
    color: #e6cefd;
}

/* Word样式 */
.cWordBg {
    background: #d8efff;
}

.cWordBg-in {
    background: linear-gradient(
        180deg,
        #ffffff 68%,
        rgba(255, 255, 255, 0.1) 100%
    );
}

.cWordTitle-in {
    color: #478ac0;
}

.cWordline-in {
    background: #c4e0ff;
}

.cWordSource {
    color: #accce6;
}

/* Excel样式 */
.cExcelBg {
    background: #def4ed;
}

.cExcelBg-in {
    background: linear-gradient(
        180deg,
        #ffffff 68%,
        rgba(255, 255, 255, 0.1) 100%
    );
}

.cExcelTitle-in {
    color: #58a982;
}

.cExcelline-in {
    background: #c5ecc4;
}

.cExcelSource {
    color: #b6e2cc;
}

/* PPT样式 */
.cPPTBg {
    background: #ffeee1;
}

.cPPTBg-in {
    background: linear-gradient(
        180deg,
        #ffffff 68%,
        rgba(255, 255, 255, 0.1) 100%
    );
}

.cPPTTitle-in {
    color: #ee9d4c;
}

.cPPTline-in {
    background: #f7d9bb;
}

.cPPTSource {
    color: #fadabb;
}

/* PDF样式 */
.cPDFBg {
    background: #ffeae9;
}

.cPDFBg-in {
    background: linear-gradient(
        180deg,
        #ffffff 68%,
        rgba(255, 255, 255, 0.1) 100%
    );
}

.cPDFTitle-in {
    color: #dc706e;
}

.cPDFline-in {
    background: #ffdad9;
}

.cPDFSource {
    color: #ffcac8;
}
</style>
